<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>新增学生信息</title>
    <style>
        body {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            font-family: "Microsoft YaHei", sans-serif;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
            width: 150px;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        tr:hover {
            background-color: #f1f1f1;
        }

        input, select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn-container {
            margin-top: 20px;
            text-align: center;
        }

        button {
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            font-size: 16px;
        }

        .btn-save {
            background-color: #4CAF50;
            color: white;
        }

        .btn-cancel {
            background-color: #f44336;
            color: white;
        }

        button:hover {
            opacity: 0.8;
        }

        .error-message {
            color: red;
            margin: 10px 0;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>新增学生信息</h1>
<div id="app">
    <div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
    <form @submit.prevent="addStudent">
        <table>
            <tbody>
            <tr>
                <td>学号</td>
                <td><input type="text" v-model="student.studentId" required placeholder="请输入学号"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input type="text" v-model="student.name" required placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td><input type="number" v-model="student.age" placeholder="请输入年龄"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <select v-model="student.gender">
                        <option value="男">男</option>
                        <option value="女">女</option>
                        <option value="其他">其他</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>总分</td>
                <td><input type="number" step="0.5" v-model="student.totalScore" placeholder="请输入总分"></td>
            </tr>
            <tr>
                <td>排名</td>
                <td><input type="number" v-model="student.rank" readonly></td>
            </tr>
            </tbody>
        </table>

        <div class="btn-container">
            <button type="submit" class="btn-save">保存</button>
            <button type="button" class="btn-cancel" @click="cancelAdd">取消</button>
        </div>
    </form>
</div>

<!-- 引入 axios 和 Vue -->
<script src="js/axios.min.js"></script>
<script type="module">
    import { createApp } from './js/vue.esm-browser.js';

    createApp({
        data() {
            return {
                student: {
                    studentId: '',
                    name: '',
                    age: '',
                    gender: '男',
                    totalScore: '',
                },
                errorMessage: ''
            };
        },
        methods: {
            // 添加学生信息
            async addStudent() {
                this.errorMessage = '';
                // 简单表单验证
                if (!this.student.studentId) {
                    this.errorMessage = '学号不能为空';
                    return;
                }

                if (!this.student.name) {
                    this.errorMessage = '姓名不能为空';
                    return;
                }

                try {
                    // 发送新增请求
                    const studentData = {
                        studentId: this.student.studentId,
                        name: this.student.name,
                        age: this.student.age,
                        gender: this.student.gender,
                        totalScore: this.student.totalScore
                    };
                    const result = await axios.post(`/student`, studentData);
                    if (result.data) {
                        alert('学生信息添加成功，系统已自动计算排名');
                        window.location.href = '/student.html';
                    } else {
                        alert('更新失败: ' + (result.data.message || '未知错误'));
                    }

                } catch (error) {
                    alert('添加学生信息失败: ' + (error.message || "未知错误"));
                }
            },

            // 取消添加
            cancelAdd() {
                if (confirm('确定要取消添加吗？未保存的更改将丢失。')) {
                    window.location.href = '/student.html';  // 返回学生列表页面
                }
        },
        // 重置学生信息
        resetStudent() {
            this.student = {
                studentId: '',
                name: '',
                age: '',
                gender: '男',
                totalScore: '',
            };
        }
    },
        mounted() {
            // 初始化学生信息
            this.resetStudent();}
    }).mount('#app');
</script>
</body>
</html>